<route lang="json5" type="page" needLogin="false">
{
  style: {
    navigationBarTitleText: '审核中',
  },
}
</route>
<template>
  <view class="w-screen overflow-hidden bg-#f6f6f6 min-h-100vh">
    <view
      class="bg-#fff p-20rpx w-100% box-border mt-20rpx"
      v-for="item in homestayList"
      :key="item"
    >
      <wd-row gutter="10">
        <wd-col :span="10">
          <view class="w-250rpx h-250rpx">
            <image class="w-100% h-100% border-rd-12rpx" :src="item.coverPhotoUrl"></image>
          </view>
        </wd-col>
        <wd-col :span="14">
          <view class="flex my-10rpx" style="flex-wrap: wrap; align-items: center; height: 230rpx">
            <view class="ellipsis title" style="width: 100%">
              {{ item.homestayName }}
            </view>
            <view>
              <span class="per-capita ml-2rpx">¥</span>
              <span class="per-money mx-6rpx">{{ item.consumption }}</span>
              <span class="per-capita">元</span>
            </view>
            <view class="flex my-10rpx" style="flex-wrap: wrap; width: 100%">
              <view class="mr-8rpx" v-for="(tag, index) in item.homestayLabel" :key="index">
                <wd-tag
                  color="#AD0E0E"
                  bg-color="#AD0E0E"
                  plain
                  style="width: 100rpx; text-align: center"
                >
                  {{ tag }}
                </wd-tag>
              </view>
            </view>
          </view>
        </wd-col>
      </wd-row>
    </view>
    <wd-loadmore v-if="homestayList.length > 0" :state="state" @reload="loadmore" />
  </view>
  <wd-fab type="warning" position="right-bottom" :draggable="true">
    <wd-button @click="addHomestay" type="primary" round>新建民宿</wd-button>
  </wd-fab>
</template>

<script lang="ts" setup>
import { getHomestayPage } from '@/service/TouristManagement/MyHomestay'
import { useUserStore } from '@/store'
const baseurl = ref(import.meta.env.VITE_SERVER_BASEURL)
const state = ref<string>('loading')
const max = ref<number>(60)
const userStore = useUserStore()
const userId = computed(() => userStore.userInfo.userId)

const homestayList = ref([])
const homestay = reactive({
  pageNo: 1,
  pageSize: 10,
  status: 1,
})

function loadmore() {
  state.value = 'loading'
  setTimeout(() => {
    getHomestayList()
  }, 1000)
}
onReachBottom(() => {
  if (homestayList.value.length === max.value) {
    state.value = 'finished'
  } else if (homestayList.value.length < max.value) {
    homestay.pageNo += 1
    loadmore()
  }
})

// 获取民宿列表
async function getHomestayList() {
  const data: any = await getHomestayPage({ ...homestay }, { UserId: userId.value })
  homestayList.value.push(...data.data.list)
  max.value = data.data.total
  homestayList.value = homestayList.value.map((item) => {
    item.fileDOList = item.fileDOList.reverse()
    const fileUrl =
      item.fileDOList && item.fileDOList.length > 0 && item.fileDOList[0].url
        ? item.fileDOList[0].url
        : null
    let homestayLabel
    if (typeof item.homestayLabel === 'string') {
      homestayLabel = item.homestayLabel.split(',')
    } else if (Array.isArray(item.homestayLabel)) {
      homestayLabel = item.homestayLabel
    } else {
      homestayLabel = []
    }

    return {
      ...item,
      homestayLabel,
      coverPhotoUrl: fileUrl ? baseurl.value + fileUrl : null,
    }
  })

  homestayList.value.length === max.value ? (state.value = 'finished') : (state.value = 'loading')
}
const addHomestay = () => {
  uni.navigateTo({ url: '/pages/TouristManagement/MyHomestay/addHomestay?type=' + 'add' })
}
onMounted(() => {
  homestay.status = 1
  homestayList.value = []
  getHomestayList()
})
</script>
<style lang="scss" scoped>
.title {
  color: rgb(16, 16, 16);
  font-size: 36rpx;
  text-align: justify;
  font-weight: 500;
}
.per-money {
  color: #cf3939;
  font-size: 26rpx;
  text-align: left;
  font-weight: 500;
}
.per-capita {
  color: #101010;
  font-size: 26rpx;
  text-align: left;
  font-weight: 500;
}
</style>
